<template>
	<d2-container>
		<template>
			<div class="form-area">
				<!-- 说明 -->
				<!-- 如果是 左右结构 的布局，一行用一个row，每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<!-- 如果不需要左右布局，则不需要用row、col -->
				<el-form ref="addForm" :model="formData" :rules="rules" label-width="100px" style="height:auto">
					<div class="form-title">
						<h3>基本信息</h3>
					</div>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入库单编号" prop="id">
								<el-input type="text" v-model="formData.id" placeholder="请输入入库单编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="进货单编号" prop="id2">
								<el-input type="text" v-model="formData.id2" placeholder="请输入进货单编号" readonly>
									<template slot="append">
										<el-button @click="showPurchaseList = true">选择</el-button>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="供应商名称" prop="supplier">
								<el-input type="text" v-model="formData.supplier" placeholder="请输入供应商名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="入库仓库" prop="store">
								<el-select v-model="formData.store" placeholder="请选择" style="width: 100%;">
									<el-option label="南宁仓库1" value="0"></el-option>
									<el-option label="南宁仓库2" value="1"></el-option>
									<el-option label="柳州仓库" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="状态" prop="status">
								<el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
									<el-option label="已入库" value="1"></el-option>
									<el-option label="未入库" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="入库类型" prop="type">
								<el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
									<el-option label="用户采购入库" value="1"></el-option>
									<el-option label="销售退货入库" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入库时间" prop="time">
								<el-date-picker type="datetime" v-model="formData.time" placeholder="选择日期时间"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="入库人" prop="people">
								<el-input type="text" v-model="formData.people" placeholder="请输入入库人"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="入库说明" prop="remark">
								<el-input type="textarea" :rows="5" v-model="formData.remark" placeholder="请输入入库说明"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title">
						<div class="form-title-left">
							<h3>入库商品信息</h3>
						</div>
					</div>

					<!-- 表格 -->
					<!-- 表格统一用 带边框、条纹间隔 的样式 -->
					<div class="form-table">
						<el-table :data="tableData" stripe border style="width: 100%">
							<el-table-column type="index" label="序号" width="50"></el-table-column>
							<el-table-column label="待进货流水号" width="100">DJ202101023</el-table-column>
							<el-table-column label="SKU名称">【3斤】 特级恭城农家吊柿饼</el-table-column>
							<el-table-column label="SKU采购批次" width="100">20200101-DC008</el-table-column>
							<el-table-column label="商品规格" width="100">3斤装</el-table-column>
							<el-table-column label="所属SPU" width="150">恭城农家柿饼</el-table-column>
							<el-table-column label="单位" width="80">斤</el-table-column>
							<el-table-column label="进货总数量" width="120">1000</el-table-column>
							<el-table-column label="已入库数量" width="120">1000</el-table-column>
							<el-table-column label="未入库数量" width="120">99990</el-table-column>
							<el-table-column label="本次入库数量" width="140" prop="number">
								<template slot-scope="scope">
									<span v-if="!scope.row.number && !scope.row.isEdit" @click="scope.row.isEdit = true">未设置数量</span>
									<span v-else-if="!scope.row.isEdit" @click="scope.row.isEdit = true">{{scope.row.number}}</span>
									<el-input v-model="scope.row.number" placeholder="输入数量" @blur="scope.row.isEdit = false" clearable v-else-if="scope.row.isEdit"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="操作" fixed="right" width="150">
								<template slot-scope="scope">
									<el-button type="primary" size="small" plain>移除</el-button>
									<el-button type="primary" size="small" plain v-if="!scope.row.isEdit" @click="scope.row.isEdit = true">修改</el-button>
									<el-button type="primary" size="small" v-if="scope.row.isEdit" @click="scope.row.isEdit = false">保存</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<div class="form-title">
						<div class="form-title-left">
							<h3>列表2</h3>
						</div>

						<div class="form-title-right">
							<el-button type="primary" size="medium">新建进货单</el-button>
						</div>
					</div>

					<!-- 表格 -->
					<!-- 表格统一用 带边框、条纹间隔 的样式 -->
					<div class="form-table">
						<el-table :data="tableData" stripe border @selection-change="handleSelectionChange" style="width: 100%">
							<el-table-column type="selection" width="50"></el-table-column>
							<el-table-column label="待进货流水号" width="120">DJ202101023</el-table-column>
							<el-table-column label="SKU名称">【3斤】 特级恭城农家吊柿饼</el-table-column>
							<el-table-column label="SKU采购批次" width="150">20200101-DC008</el-table-column>
							<el-table-column label="商品规格" width="100">3斤装</el-table-column>
							<el-table-column label="所属SPU" width="150">恭城农家柿饼</el-table-column>
							<el-table-column label="单位" width="80">斤</el-table-column>
							<el-table-column label="进货总数量" width="120">100000</el-table-column>
							<el-table-column label="已入库数量" width="120">1000</el-table-column>
							<el-table-column label="未入库数量" width="120">99990</el-table-column>
							<el-table-column label="其他内容" width="150">99990</el-table-column>
							<el-table-column label="其他内容" width="150">99990</el-table-column>
						</el-table>

						<div class="page table-page">
							<el-pagination
								background
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="[10, 20, 50, 100]"
								:page-size="pageSize"
								layout="total, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>

					<!-- 提交按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
								<div class="form-submit">
									<el-button class="form-submit-btn" type="primary" @click="submit('addForm')">保存并入库</el-button>
									<el-button class="form-submit-btn" type="primary" plain @click="submit('addForm')">保存</el-button>
									<el-button class="form-cancle-btn">取消</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</template>

		<!-- 弹框 -->
		<template>
			<el-dialog title="进货单选择" width="60%" :visible.sync="showPurchaseList">
				<div class="dialog-search">
					<el-form class="inline-form" :inline="true" :model="searchForm">
						<el-form-item label="进货单名称">
							<el-input v-model="searchForm.name" placeholder="请输入关键字" style="width: 400px;"></el-input>
						</el-form-item>
						<el-button type="primary" size="medium">搜索</el-button>
					</el-form>
				</div>

				<div class="form-table">
					<el-table :data="tableData" stripe border style="width: 100%">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column label="进货单编号" width="100">43244356</el-table-column>
						<el-table-column label="SPU名称">【3斤】 特级恭城农家吊柿饼</el-table-column>
						<el-table-column label="SKU" width="150">43244356</el-table-column>
						<el-table-column label="审核状态" width="80">已审核</el-table-column>
						<el-table-column label="入库状态" width="80">已入库</el-table-column>
						<el-table-column label="操作" width="80">
							<template slot-scope="scope">
								<el-button type="primary" plain size="small" v-if="!scope.row.isSeleted" @click="scope.row.isSeleted = true">选择</el-button>
								<el-button type="primary" size="small" v-if="scope.row.isSeleted" @click="scope.row.isSeleted = false">已选</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<div class="page dialog-page">
					<el-pagination
						background
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageSize"
						layout="total, prev, pager, next"
						:total="total"
					></el-pagination>
				</div>

				<div class="dialog-footer" slot="footer">
					<el-button type="primary">保存</el-button>
					<el-button @click="showPurchaseList =false">取消</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        id: '',
        id2: '',
        supplier: '',
        store: '',
        status: '',
        type: '',
        time: '',
        people: '',
        remark: ''
      },
      rules: {
        id: [{ required: true, message: '请输入入库单编号', trigger: 'blur' }, { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }],
        id2: [{ required: true, message: '请输入进货单编号', trigger: 'blur' }, { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }],
        supplier: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }, { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }],
        store: [{ required: true, message: '请选择入库仓库', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        type: [{ required: true, message: '请选择入库类型', trigger: 'blur' }],
        time: [{ required: true, message: '请选择入库时间', trigger: 'blur' }],
        people: [{ required: true, message: '请输入入库人', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入入库说明', trigger: 'blur' }]
      },

	  showPurchaseList: false,

	  tableData: [
	  		  { id: 1, number: '', isSeleted: false, isEdit: false },
	  		  { id: 2, number: '', isSeleted: false, isEdit: false },
	  		  { id: 3, number: '', isSeleted: false, isEdit: false },
	  		  { id: 4, number: '', isSeleted: false, isEdit: false },
	  		  { id: 5, number: '', isSeleted: false, isEdit: false }
	  ],
	  multipleSelection: [],
      currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  searchForm: {
		  name: ''
	  }
    }
  },
  methods: {
  	  submit (formName) { // 提交事件
  		  this.$refs[formName].validate(valid => {
  			  if (valid) {
  				  // 做些什么
  			  }
  		  })
  	  },
	  handleCurrentChange (val) {
	    this.currentPage = val
	  },

	  handleSelectionChange (val) {
	          this.multipleSelection = val
	        }
  }
}
</script>

<style>
</style>
